<template>
  <view class="rf-product-detail">
		<!--顶部返回按钮-->
		<!--#ifdef MP-WEIXIN-->
		<text class="back-btn iconfont iconzuo" @tap="navBack"></text>
		<!--#endif-->
		<!--header-->
		<view class="detail" v-if="product.name">
			<!--顶部商品轮播图-->
			<view class="carousel">
				<swiper indicator-dots circular="true" duration="400" controls touchable>
					<!--#ifdef APP-PLUS-->
					<swiper-item class="swiper-item" v-if="product.video_url">
						<video muted :poster="product.covers[0]" object-fit="contain" :src="product.video_url"></video>
					</swiper-item>
					<!--#endif-->
					<swiper-item
						class="swiper-item"
						v-for="(item, index) in product.covers"
						:key="index"
					>
						<view class="image-wrapper">
							<image :src="item" class="loaded" mode="aspectFill"></image>
						</view>
						<uni-tag class="content" circle size="small" :text="`${index + 1}  / ${product.covers.length}`"></uni-tag>
					</swiper-item>
				</swiper>
			</view>
			<!--商品信息-->
			<view class="introduce-section">
		<!-- 		<view class="introduce-first-line">
					<view
						class="price-box point-box"
						v-if="product.point_exchange_type == 4"
					>
						该商品仅需
						<text class="price">{{ product.point_exchange }} 积分</text>
					</view>
					<view class="price-box" v-else>
						<view class="price-first-line">
							<image
								class="member-level"
								mode="aspectFit"
								v-if="product.memberDiscount != [] && product.memberDiscount && product.memberDiscount.discount > 0 && userInfo"
								:src="vipPrice">
							</image>
							<text class="price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{ currentProductPrice }}</text>
						</view>
						<view class="m-price-wrapper" v-if="product.market_price > product.price">
							价格 <text class="m-price">{{ moneySymbol }}{{ product.market_price }}</text>
						</view>
					</view>
					<view class="collect" @tap="toFavorite">
						<view class="iconfont" :class="[ favorite ? `text-${themeColor.name} iconshixin1` : 'iconguanzhu']"></view>
						<text>收藏</text>
					</view>
				</view> -->
				<view class="introduce-second-line" style="margin:20rpx">
					<view class="title">
						<text  style="font-weight: 700;font-size:34rpx">{{ product.name }}</text>
						<!-- <text class="sketch">{{ product.description_format }}</text> -->
					</view>
					<!-- <view class="share">
						<rf-tag
							type="gray"
							size="small"
							tui-tag-class="tui-tag-share tui-size"
							shape="circleLeft"
						>
							<button class="share-btn" open-type="share" :class="'text-' + themeColor.name" @tap.stop="share()">
								<text class="iconfont iconfenxiang"></text>
								<text class="tui-share-text tui-gray">分享</text>
							</button>
						</rf-tag>
					</view> -->
				</view>
			<!-- 	<view class="product-tag">
					<uni-tag
						@tap="openPoster"
						class="tag"
						circle
						type="base"
						text="生成海报"
						size="small"
					/>
				</view> -->
		<!-- 		<view class="data" v-if="product">
					<text class="item">快递: {{ product.shipping_type === '1' ? '包邮' : '买家自付' }}</text>
					<text class="item">月销 {{ product.total_sales }}</text>
					<text v-if="product.address_name" class="item in1line">{{ product.address_name }}</text>
				</view> -->
			</view>
			<!--商品参数-->



			<view class="c-list">
				<!--商品库存-->


	<rf-item-popup title="基本信息">
		<view slot="content" ><rf-parser  :html="product.intro_h5 ||  product.intro" lazy-load></rf-parser>
		</view>
	</rf-item-popup>
	<rf-item-popup title="SKU" >
		<view slot="content">	{{ product.skustr || 0 }}</view>
	</rf-item-popup>
<!-- 	<rf-item-popup title="Intro" v-if="product.description" >
		<view slot="content">	{{ product.description || 0 }}</view>
	</rf-item-popup> -->

	<rf-item-popup title="分类">
		<view slot="content" class="" @tap="goToCategory(product.category)">{{ product.category.title || '暂无分类' }}
		</view>
	</rf-item-popup>
	<!-- <rf-item-popup title="属性" >
		<view slot="content">	{{ product.base_attribute_format || 0 }}</view>
	</rf-item-popup> -->

	<rf-item-popup title="属性">
	<view slot="content" class="attribute-list">
		<block v-if="product.base_attribute_format && product.base_attribute_format.length">
			<view v-for="(attr, index) in product.base_attribute_format" :key="index" class="attr-group">
				<view class="attr-name">{{ attr.name }}</view>
				<view class="attr-values">
					<text
						v-for="(val, idx) in attr.value"
						:key="idx"
						class="attr-value"
						@tap="goToAttrList(val.base_spec_id, val.base_spec_value_id)"
						style="text-decoration: underline;text-underline-offset:1.6px;padding-right:5px;cursor:pointer;"
					>
						{{ val.title }}
					</text>
				</view>
			</view>
		</block>
		<view v-else>暂无属性信息</view>
	</view>
	</rf-item-popup>

	<rf-item-popup title="">
  <view slot="content" class="document-link">
    <text v-if="!product.document">暂无文档</text>
    <!-- #ifdef H5 -->
    <a v-else :href="product.document" target="_blank" class="doc-link" style="font-size:24rpx;color:#ffffff; border-radius:6px;padding:6px 10px;background-color: #f31717 !important;" >Datasheet</a>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <text v-else class="doc-link" style="font-size:24rpx;color:#ffffff; border-radius:6px;padding:6px 10px;background-color: #f31717 !important;" @tap="openDocument(product.document)">Datasheet</text>
    <!-- #endif -->

	<a   @tap.stop="copyProductInfo(product)" target="_blank" class="doc-link" style="font-size:24rpx;margin-left:10rpx;color:#ffffff; border-radius:6px;padding:6px 10px;background-color: #f31717 !important;" >复制</a>
  </view>

</rf-item-popup>









			</view>



			<view class="detail-desc" style="padding:10px">
				<view class="d-header">
					<text>商品详情</text>
				</view>



		<!-- 		<rf-parser v-else :html="product.intro" lazy-load></rf-parser> -->

				<rf-parser :html="product.content_h5 || product.content " lazy-load></rf-parser>
				<rf-parser :html="product.content1_h5 || product.content1 " lazy-load></rf-parser>
				<rf-parser :html="product.content2_h5 || product.content2 " lazy-load></rf-parser>
			</view>
			<!-- 底部操作菜单 -->
		<!-- 	<view class="page-bottom">
				<view class="page-bottom-bth-wrapper">
					<navigator
						url="/pages/index/index"
						open-type="switchTab"
						class="p-b-btn"
					>
						<i class="iconfont iconzhuyedefuben"></i>
						<text>首页</text>
					</navigator>
					<navigator
						url="/pages/cart/cart"
						open-type="switchTab"
						class="p-b-btn cart"
					>
						<i class="iconfont icongouwuche2"></i>
						<text>购物车</text>
						<rf-badge
							v-if="hasLogin && cartNum && cartNum > 0"
							type="error"
							size="small"
							class="badge"
							:text="cartNum"
						></rf-badge>
					</navigator>
					<view @tap="kefuShow = true" class="p-b-btn">
						<i class="iconfont iconkefu2"></i>
						<text>客服</text>
					</view>
				</view>
				<view
					class="action-btn-group"
					v-if="parseInt(this.currentStock || this.product.stock, 10) > 0"
				>
					<button
						class="action-btn"
						:class="'bg-' + themeColor.name"
						:disabled="buyBtnDisabled"
						@tap="addCart('buy')"
					>
						立即购买
					</button>
					<button
						:disabled="addCartBtnDisabled"
						class="action-btn"
						:class="'bg-' + themeColor.name"
						@tap="addCart('cart')"
					>
						加入购物车
					</button>
				</view>
				<view class="action-btn">
					<butto	:disabled="buyBtnDisabled"
					>
						库存不足
					</button>n
						v-if="parseInt(this.currentStock || this.product.stock, 10) === 0"
						class="action-btn-submit"

				</view>
			</view>
		 -->

		</view>
		<!-- 分享引导 -->
		<view
			class="popup spec show"
			v-if="shareClass === 'show'"
			@touchmove.stop.prevent="stopPrevent"
			@tap="hideShareSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask" @tap="hideShareSpec"></view>
			<view class="share-bg">
				<image :src="shareBg"></image>
			</view>
		</view>
		<view class="hideCanvasView" v-if="canvasShow">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
		<!--回到顶部-->

		<!--#ifdef MP-->
    <rf-nav></rf-nav>
		<!--#endif-->
		<view
			class="popup spec show"
			v-if="kefuShow"
			@touchmove.stop.prevent="stopPrevent"
			@tap="hide"
		>
			<!-- 遮罩层 -->
			<view class="mask" @tap="hide"></view>
			<view class="kefu-bg">
				<image :src="appServiceQr"></image>
			</view>
		</view>
	</view>
</template>
<script>
	/**
	 *@des 封装商品详情
	 *@author stav stavyan@qq.com
	 *@blog https://stavtop.club
	 *@date 2020/05/15 16:22:24
	 */
	import rfItemPopup from '@/components/rf-item-popup';
	import moment from '@/common/moment';
	import rfAttrContent from '@/components/rf-attr-content';
	import rfRate from '@/components/rf-rate/rf-rate';
	import rfBadge from '@/components/rf-badge/rf-badge';
	import uniTag from '@/components/uni-tag/uni-tag';
	import rfNav from '@/components/rf-nav';
	import rfLive from '@/components/rf-live';
	import { cartItemCount, cartItemCreate } from '@/api/product';
	import { collectCreate, collectDel, pickupPointIndex, transmitCreate } from '@/api/basic';
  import { couponReceive, addressList } from '@/api/userInfo';
	import { mapMutations } from 'vuex';
  export default {
    name: 'rfProductDetail',
    props: {
			product: {
				type: Object,
				default() {
					return {
					};
				}
			},
			userInfo: {
				type: Object,
				default() {
					return {};
				}
			},
			url: {
				type: String,
				default: ''
			},
			marketType: {
				type: String,
				default: 'buy_now'
			}
    },
		components: {
			rfNav,
			rfItemPopup,
			rfBadge,
			rfLive,
			rfRate,
			uniTag,
			rfAttrContent
		},
		data() {
			return {
                appServiceQr: this.$mSettingConfig.appServiceQr,
				kefuShow: false,
				addressClass: 'none',
				canvasShow: true,
				logo: this.$mSettingConfig.appLogo,
				vipPrice: this.$mAssetsPath.vipPrice,
				posterShow: false,
				serviceClass: 'none', // 服务弹窗
				ladderPreferentialClass: 'none', // 阶梯优惠弹窗
				attributeValueClass: 'none', // 商品参数弹窗
				specClass: 'none', // 商品参数弹窗
				couponClass: 'none', // 优惠券弹窗
				shareClass: 'none', // 分享引导弹窗
				fullGiveClass: 'none', // 满减送弹窗
				cartType: null, // 下单类型
				couponList: [], // 优惠券列表
				currentStock: null,
				currentSkuPrice: null,
				currentSkuName: null,
				currentCartCount: 1,
				evaluateList: [],
				hasLogin: this.$mStore.getters.hasLogin,
				cartNum: uni.getStorageSync('cartNum'),
				addressTypeList: this.$mConstDataConfig.addressTypeList,
				tabCurrentIndex: 0,
				loading: true,
				errorInfo: '',
				headImg: this.$mAssetsPath.headImg,
				isPointExchange: false,
				shareBg: this.$mAssetsPath.shareBg,
				appServiceType: this.$mSettingConfig.appServiceType,
				productPosterQrType: this.$mSettingConfig.productPosterQrType,
				appName: this.$mSettingConfig.appName,
				shareFrom: '',
				poster: {},
				promoCode: '',
				addressList: [],
				moneySymbol: this.moneySymbol,
				state: 1,
				singleSkuText: this.singleSkuText,
				thirdPartyQrCodeImg: ''
			};
		},
		async onShareAppMessage () {
				// #ifdef MP
				await this.$http.post(`${transmitCreate}`, {
					topic_type: 'product',
					topic_id: this.productId
				}).then(() => {
					return {
					title: this.productDetail.name,
					path: `/pages/product/product?id=${this.productId}`
					};
				});
				// #endif
		},
		filters: {
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm');
			},
			pointExchangeTypeFilter(val) {
				const type = [
					'',
					'非积分兑换',
					'积分加现金',
					'积分兑换或直接购买',
					'只支持积分兑换'
				];
				return type[parseInt(val, 10)];
			},
			integralGiveTypeFilter(val) {
				const type = ['固定积分', '百分比'];
				return type[parseInt(val, 10)];
			},
			givePointFilter(val) {
				return val.integral_give_type === '1'
					? Math.round((parseInt(val.give_point, 10) / 100) * parseInt(val.minSkuPrice, 10))
					: parseInt(val.give_point, 10);
			}
		},
		computed: {
			type() {
						return 'buy_now';
			},
			// 购买按钮禁用
			buyBtnDisabled() {
				return parseInt(this.currentStock || this.product.stock, 10) === 0;
			},
			// 添加购物车按钮禁用
			addCartBtnDisabled() {
				return (
					this.product.point_exchange_type === '2' ||
					this.product.point_exchange_type === '4' ||
					parseInt(this.currentStock || this.product.stock, 10) === 0 ||
					this.product.is_virtual === '1'
				);
			},
			// 最小购买数量
			minNum() {
				return 1;
			},
			// 最小购买数量
			maxNum() {
				let maxNum = 0;
				return maxNum;
			},
			favorite () {
				return !!this.product.myCollect;
			},
			// 计算倒计时时间
			second() {
				return function(val) {
					return Math.floor(val - new Date() / 1000);
				};
			},
			currentProductPrice () {
				let price;
				if (this.type === 'buy_now') {
				if (this.product.memberDiscount && this.product.memberDiscount.length !== 0) {
					// eslint-disable-next-line
					this.product.minSkuPrice = this.product.minSkuPrice * (1 - this.product.memberDiscount.discount / 100).toFixed(2);
					// eslint-disable-next-line
					this.product.maxSkuPrice = this.product.maxSkuPrice ? (this.product.maxSkuPrice * (1 - this.product.memberDiscount.discount / 100)).toFixed(2) : 0;
				}
				// eslint-disable-next-line
				price = this.currentSkuPrice || ((this.product.maxSkuPrice && (this.product.minSkuPrice !== this.product.maxSkuPrice)) ? (this.product.minSkuPrice + ' ~ ' + this.product.maxSkuPrice) : parseFloat(this.product.minSkuPrice).toFixed(2));
				return price;
				}
				return parseFloat(price || '0').toFixed(2);
			}
		},
    methods: {
            ...mapMutations(['setCartNum']),
					// 复制商品信息到剪切板
			copyProductInfo(item) {
				// 处理HTML标签：将<br>替换为换行符，去掉其他HTML标签
				const cleanIntro = this.cleanHtmlTags(item.intro_h5 || item.intro || '');

				const info = `产品名称：${item.name}\n货号：${item.skustr}\n${cleanIntro}\n产品详情地址：https://www.enkilife.cn/h5/#/pages/product/product?id=${item.id}\n产品说明书地址：${item.document || '暂无'}`;

console.log(info)

			  // #ifdef H5
				if (navigator && navigator.clipboard && window.isSecureContext) {
					navigator.clipboard.writeText(info).then(() => {
						this.copySuccessDialog = true;
								uni.showToast({ title: '已复制', icon: 'none' });
					}).catch(() => {
						this._fallbackCopyTextToClipboard(info);
					});
				} else {
					this._fallbackCopyTextToClipboard(info);
				}
				// #endif

				// #ifdef MP-WEIXIN || APP-PLUS || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
				uni.setClipboardData({
					data: info,
					success: () => {
						this.copySuccessDialog = true;
								uni.showToast({ title: '已复制', icon: 'none' });
					},
					fail: () => {
						uni.showToast({ title: '复制失败', icon: 'none' });
					}
				});
				// #endif
			},
			// 返回上一页
			navBack() {
				this.$mRouter.back();
			},
			hide() {
				this.kefuShow = false;
			},
			// 分享商品
			share() {
				// #ifdef H5
				if (this.$mPayment.isWechat()) {
				this.shareClass = 'show';
				} else {
				this.$mHelper.h5Copy(this.url);
				}
				// #endif
				// #ifdef APP-PLUS
						this.$mHelper.handleAppShare(this.url, this.appName, this.product.name, this.product.picture);
						// #endif
			},
			// 通用跳转
			navTo(route) {
				if (this.appServiceType === '1' && route === '/pages/product/service/index') {
					this.kefuShow = true;
					return;
				}
				if (!this.hasLogin) {
					this.$mHelper.backToLogin();
				} else {
					if (this.appServiceType === '0') {
						this.$mHelper.toast('暂不提供客服功能');
					} else {
						this.$mRouter.push({ route });
					}
				}
			},
			// 弹窗显示
			showPopupService(type, list) {
				if (list.length === 0) return;
				this[type] = 'show';
			},
			// 关闭服务弹窗
			hideService() {
				this.specClass = 'none';
				this.couponClass = 'none';
				this.serviceClass = 'none';
				this.ladderPreferentialClass = 'none';
				this.attributeValueClass = 'none';
				this.fullGiveClass = 'none';
			},
			// 获取优惠券
			async getCoupon(item) {
				// if (!this.hasLogin) {
				// 	await this.$mHelper.backToLogin();
				// 	return;
				// }
				// await this.$http
				// 	.post(`${couponReceive}`, {
				// 		id: item.id
				// 	})
				// 	.then(() => {
				// 		this.$mHelper.toast('领取成功');
				// 	});
			},
			// 跳转至评价列表
			toEvaluateList() {
				if (!this.product.evaluateStat || parseInt(this.product.comment_num, 10) === 0) return;
				this.$mRouter.push({
					route: `/pages/order/evaluation/list?comment_num=${
						this.product.comment_num
					}&evaluateStat=${JSON.stringify(this.product.evaluateStat)}`
				});
			},
			// 顶部tab点击
			tabClick(index, state) {
				this.page = 1;
				this.addressList.length = 0;
				this.tabCurrentIndex = index;
				this.state = state;
				const api = (this.state === 1 ? addressList : pickupPointIndex);
				this.getAddressList(api);
			},	// 获取收货地址列表
			async getAddressList(api) {
				// await this.$http
				// 	.get(api, {
				// 	})
				// 	.then(r => {
				// 		this.addressList = r.data;
				// 	});
			},
			// 规格弹窗开关
			toggleSpec(row) {
				if (!this.product.id) return;
				if (this.specClass === 'show') {
					this.currentStock = row.stock;
					this.currentSkuPrice = row.price;
					this.currentSkuName = row.skuName;
					this.currentCartCount = row.cartCount;
					const skuId = row.skuId;
					if (parseInt(this.currentStock, 10) === 0) {
						this.$mHelper.toast('库存不足');
						return;
					}
					if (this.cartType === 'cart') {
						this.handleCartItemCreate(skuId);
					} else if (this.cartType === 'buy') {
						this.buy(skuId);
					}
					this.cartType = null;
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			// 海报弹窗开关
			async openPoster() {
				this.$mHelper.toast('该版本不支持生成海报');
			},
			hideSpec() {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			},
			hideShareSpec() {
				this.shareClass = 'hide';
				setTimeout(() => {
					this.shareClass = 'none';
				}, 250);
			},
			// 添加商品至购物车
			async handleCartItemCreate(skuId) {
				// await this.$http
				// 	.post(`${cartItemCreate}`, {
				// 		sku_id: skuId,
				// 		num: this.currentCartCount
				// 	})
				// 	.then(() => {
				// 		this.$mHelper.toast('添加购物车成功');
				// 		this.$http.get(`${cartItemCount}`).then(r => {
				// 			this.setCartNum(r.data);
				// 			this.cartNum = r.data;
				// 		});
				// 	});
			},
			// 收藏
			async toFavorite() {
				if (!this.product.id) return;
				if (!this.hasLogin) {
					this.specClass = 'none';
					await this.$mHelper.backToLogin();
				} else {
					this.favorite ? this.handleCollectDel() : this.handleCollectCreate();
				}
			},
			// 收藏商品
			async handleCollectCreate() {
				await this.$http
					.post(`${collectCreate}`, {
						topic_id: this.product.id,
						topic_type: 'product'
					})
					.then(() => {
						this.$mHelper.toast('收藏成功');
						this.$emit('product');
					});
			},
			// 取消收藏商品
			async handleCollectDel() {
				await this.$http
					.delete(`${collectDel}?id=${this.product.myCollect.id}`)
					.then(() => {
						this.$mHelper.toast('取消收藏成功');
						this.$emit('product');
					});
			},
			async buy(skuId) {
        const params = {};
        params.data = JSON.stringify({ sku_id: skuId, num: this.currentCartCount });
				if (
					this.product.point_exchange_type === '2' ||
					this.product.point_exchange_type === '4' ||
					(this.product.point_exchange_type === '3' &&
						this.isPointExchange)
				) {
					params.type = 'point_exchange';
				} else {
					params.type = this.type;
				}
				this.$mRouter.push({
					route: `/pages/order/create/order?data=${JSON.stringify(params)}&promo_code=${this.promoCode}`
				});
			},
			addCart(type, isPointExchange) {
				if (!this.product.id) return;
				if (!this.hasLogin) {
					this.$mHelper.backToLogin();
					return;
				}
				this.specClass = 'show';
				this.cartType = type;
				this.isPointExchange = isPointExchange;
			},
			stopPrevent() {},
			goToCategory(category) {
				if (!category || !category.id) return;
				uni.navigateTo({
					url: `/pages/product/list?cate=${category.id}`
				});
			},
      openDocument(url) {
        if (!url) return;
        // #ifdef H5
        window.open(url, '_blank');
        // #endif
        // #ifndef H5
        uni.navigateTo({
          url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
        });
        // #endif
      },
      goToAttrList(specId, valueId) {
        if (!specId || !valueId) return;
        const key = `prop_${specId}`;
        uni.navigateTo({
          url: `/pages/product/list?${key}=${valueId}`
        });
      },
      // 清理HTML标签：将<br>替换为换行符，去掉其他HTML标签
      cleanHtmlTags(htmlString) {
        if (!htmlString) return '';

        // 将<br>、<br/>、<br />等标签替换为换行符
        let cleanText = htmlString.replace(/<br\s*\/?>/gi, '\n');

        // 去掉所有其他HTML标签
        cleanText = cleanText.replace(/<[^>]*>/g, '');

        // 解码HTML实体
        cleanText = cleanText.replace(/&nbsp;/g, ' ');
        cleanText = cleanText.replace(/&lt;/g, '<');
        cleanText = cleanText.replace(/&gt;/g, '>');
        cleanText = cleanText.replace(/&amp;/g, '&');
        cleanText = cleanText.replace(/&quot;/g, '"');
        cleanText = cleanText.replace(/&#39;/g, "'");

        // 清理多余的空白字符，但保留换行符
        cleanText = cleanText.replace(/[ \t]+/g, ' ').trim();

        return cleanText;
      }
    }
  };
</script>
<style lang="scss">
.rf-product-detail {
	.back-btn {
		position: fixed;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}
	.carousel {
		height: 722upx;
		position: relative;
		swiper {
			height: 100%;
		}
		.image-wrapper {
			width: 100%;
			height: 100%;
		}
		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;
			border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
			image {
				width: 100%;
				height: 100%;
			}
			.content {
				position: absolute;
				right: $spacing-base;
				bottom: $spacing-base;
			}
		}
	}
	.detail {
		padding-bottom: 60upx;
	}
	.service {
		padding: $spacing-base $spacing-lg 0;
		.row {
			font-size: $font-lg;
			margin-bottom: $spacing-sm;
		}
	}
	.selected-text {
		margin-right: 4upx;
	}
	.sub-list {
		margin: 40upx 0 80upx;
		.row {
			width: 100%;
			margin-bottom: $spacing-lg;
		}
	}
	.share-bg {
		image {
			position: fixed;
			z-index: 100;
			width: 70vw;
			height: 45vw;
			right: $spacing-base;
			top: $spacing-base;
		}
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		border-radius: 10upx 10upx 0 0;
		background-color: #fff;
		.rf-list {
			max-height: 60vh;
			padding-bottom: 0;
			margin-bottom: $spacing-sm;
		}
	}
	// 拼团公告
	.rf-swiper-slide {
		margin-top: 20upx;
		.label {
			margin-left: 10upx;
		}
	}
	// 玩法介绍
	.play-way {
		background-color: $color-white;
		padding: 0 20upx;
		margin: 20upx 0;
		font-size: $font-base;
		.title {
			border-bottom: 1px solid #eee;
			padding: $spacing-base 0;
			display: flex;
			justify-content: space-between;
			.iconfont {
				margin-left: 0.13rem;
				font-size: 0.28rem;
				color: #717171;
			}
		}
		.way {
			font-size: $font-base - 2upx;
			padding: 20upx 0;
			display: flex;
			.item {
				flex: 1;
				text-align: center;
				.tip {
					font-size: 0.22rem;
					color: #a5a5a5;
				}
			}
			.arrow {
				width: 40upx;
				.iconfont {
					color: $font-color-light;
					font-weight: 100;
				}
			}
		}
	}
	.assemble {
		background-color: #fff;
		.assemble-item {
			height: 120upx;
			border-bottom: 1px solid #f0f0f0;
			.pictxt {
				display: flex;
				justify-content: space-between;
				.picture {
					display: flex;
					image {
						width: 80upx;
						height: 80upx;
						margin: 20upx 0;
						border-radius: 50%;
					}
					.text {
						line-height: 120upx;
						margin-left: 20upx;
					}
				}
				.right {
					display: flex;
					align-items: center;
					.time-wrapper {
						text-align: right;
						margin-right: 20upx;
						.lack {
							font-size: $font-sm;
							.font-color-red {
								margin: 0 4upx;
							}
						}
						.time {
							font-size: $font-sm;
							color: $font-color-light;
						}
					}
					.spellBnt {
						font-size: $font-sm;
						width: 120upx;
						height: 48upx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 48upx;
					}
				}
			}
		}
	}
	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;
		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}
		.tit {
			width: 140upx;
		}
		.con {
			flex: 1;
			color: $font-color-dark;
			.selected-text {
				margin-right: 10upx;
			}
		}
		.bz-list {
			height: 40upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}
		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
			.buy-now {
				color: $uni-color-primary;
			}
		}
		.red {
			color: $uni-color-primary;
		}
	}
	.category-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background: #f8f8f8;
		border-radius: 8rpx;

		&:active {
			background: #f0f0f0;
		}

		.arrow {
			color: #999;
			font-size: 24rpx;
		}
	}
	.kefu-bg {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 98;
		image {
			width: 60vw;
			height: 60vw;
			border-radius: 12upx;
			z-index: 98;
		}
	}
  .document-link {
    padding: 20rpx;
    word-break: break-all;

    .doc-link {
      color: #e4393c;
      text-decoration: underline;

      &:active {
        opacity: 0.8;
      }
    }
  }
  .attribute-list {


    .attr-group {

      .attr-name {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .attr-values {
        display: flex;
        flex-wrap: wrap;

        .attr-value {
          color: #e4393c;
          margin-right: 20rpx;
          margin-bottom: 10rpx;

          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
